<template>
  <div class="post" @click="$router.push({ path: `/article/${post.id}` })">
    <!-- 形态1：左右结构 - 1张图 -->
    <div class="type1" v-if="post.type === 1 && post.cover.length < 3">
      <div class="left">
        <h3 class="title">{{ post.title }}</h3>
        <p class="desc">
          <span>{{ post.user.nickname }}</span>
          <span>{{ post.comment_length }}跟帖</span>
        </p>
      </div>
      <van-image fit="cover" class="right" :src="post.cover[0].url | imgUrl" />
    </div>
    <!-- 形态2：上下结构 - 3张图 -->
    <div class="type2" v-else-if="post.type === 1 && post.cover.length >= 3">
      <h3 class="title">{{ post.title }}</h3>
      <div class="cover-group">
        <van-image
          fit="cover"
          class="cover-img"
          v-for="item in post.cover"
          :key="item.id"
          :src="item.url | imgUrl"
        />
      </div>
      <p class="desc">
        <span>{{ post.user.nickname }}</span>
        <span>{{ post.comment_length }}跟帖</span>
      </p>
    </div>
    <!-- 形态3：上下结构 - 1个视频 -->
    <div class="type3" v-else-if="post.type === 2">
      <h3 class="title">{{ post.title }}</h3>
      <div class="video-group">
        <i class="iconfont iconshipin"></i>
        <van-image
          fit="cover"
          class="video-img"
          :src="post.cover[0].url | imgUrl"
        />
      </div>
      <p class="desc">
        <span>{{ post.user.nickname }}</span>
        <span>{{ post.comment_length }}跟帖</span>
      </p>
    </div>
  </div>
</template>

<script>
// import request from "../utils/request";
export default {
  props: {
    // post 变量的类型要求是对象，而且必须传递
    post: {
      type: Object,
      required: true,
    },
  },
  // // 局部过滤器
  // filters: {
  //   // imgUrl 是过滤器名称
  //   // val 过滤器要处理的原始数据
  //   imgUrl(val) {
  //     // console.log(val)
  //     // 如果没有http 开始，就需要拼接成完整的图片地址
  //     if (val.indexOf("http") === -1) {
  //       return request.defaults.baseURL + val;
  //     } else {
  //       // 是 http 开始，就直接返回即可
  //       return val;
  //     }
  //   },
  // },
};
</script>

<style lang="less" scoped>
// 公共样式
.post {
  border-bottom: 1px solid #ccc;
  padding: 10px;
}
// 标题和跟帖都是一样的，所以写到外面，变成公共的
.title {
  font-size: 16px;
  margin: 5px 0;
}
.desc {
  color: #666;
  margin: 5px 0;
  span {
    font-size: 12px;
    margin-right: 10px;
  }
}
// 形态1：左右结构 - 1张图
// 形态1：左右结构 - 1张图
.type1 {
  display: flex;
  // padding: 10px;
  // background-color: #fff;
  // background-color: orange;
  .left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title {
      font-size: 16px;
    }
    .desc {
      color: #666;
      span {
        font-size: 12px;
        margin-right: 10px;
      }
    }
  }
  .right {
    width: 120px;
    height: 75px;
  }
}
// 形态2：上下结构 - 3张图
.type2 {
  // background-color: skyblue;
  .cover-group {
    display: flex;
    justify-content: space-between;
    .cover-img {
      width: 33%;
    }
  }
}
// 形态3：上下结构 - 1个视频
.type3 {
  // background-color: yellowgreen;
  .video-group {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    .iconshipin {
      font-size: 50px;
      color: #fff;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.5);
      position: absolute;
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .video-img {
      width: 100%;
    }
  }
}
</style>